<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图.</title>
    <!-- <style>
        *{margin:0px;padding:0px;}
        ol,ul{list-style: none;}
        img{
            display: block;
        }
        .banner{
            width:470px;
            height:150px;
            overflow: hidden;
            margin:200px auto;
            position: relative;
            border:1px solid #f00;
        }
        .banner ul{
            width:470px;
            position: absolute;
        }
        .banner ol{
            position: absolute;
            z-index:2;
            bottom:10px;
            right:10px;
        }
        .banner ol li{
            float:left;
            margin-left:5px;
            padding:0px 5px;
            color:white;
            border:1px solid rgb(116, 58, 16);
            background-color: rgba(238, 192, 159);
        }
        .banner ol li.active{
            background-color: rgb(116, 58, 16);
        }

        .topb{
            width:470px;
            height:150px;
            overflow: hidden;
            margin:200px auto;
            position: relative;
            border:2px solid #f00;
        }
        .topb ul{
            width:470px;
            position: absolute;
        }
        .topb ol{
            position: absolute;
            z-index:2;
            bottom:10px;
            right:10px;
        }
        .topb ol li{
            float:left;
            margin-left:5px;
            padding:0px 5px;
            color:white;
            border:1px solid rgb(116, 58, 16);
            background-color: rgba(238, 192, 159);
        }
        .topb ol li.active{
            background-color: rgb(116, 58, 16);
        }
    </style> -->
    <script src="./js/carousel_css.js"></script>
   
</head>
<body>
    <div class="banner">
        <ul>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
    <div class="topb">
        <ul>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
     <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/carousel.js"></script>
    <!-- <script>
        /*
            面向对象 对象形式来封装一个轮播图代码。 构造函数 MyBanner
        */
        function MyBanner(el,options){//构造函数
            //this 指向 myba
            this.$el=el;        //$(".banner")
            this.$index=0;//图片播放下标
            this.timmerID;//记录当前播放的定时器ID
            var defaultOptions={//默认配置
                duration:200,
                nextTime:2000,
                auto:true,
                direction:["top","left","bottom","right"]
               
            }
            this.options=$.extend(defaultOptions,options);//合并配置并赋值给当前对象的options属性
        }
        
        MyBanner.prototype.init=function(){//初始化工作，在轮播开始之前一些配置参数.
            var that=this;
            this.imgHeight=this.$el.find("img").height();//得到轮播图里面图片的高度

            this.imgWidth=this.$el.find("img").width();//得到轮播图里面的图片的宽度

            this.imgLength=this.$el.find("img").length;//查找当前轮播图里面有多少张图片. 5
            var ul=this.$el.find("ul");
            this.$el.find("ul>li").first().clone().appendTo(ul);//把第一张图克隆一份到ul的末尾.
            this.$el.mouseenter(function(){//绑定鼠标移上去停止自动播放
                clearInterval(that.timmerID);
            }).mouseleave(function(){
                if(that.options.auto&&(that.options.direction=="top"||that.options.direction=="bottom")){//如果配置里面有自动播放
                that.autoplay();//调用定时器自动播放.
                console.log(1111)
            }else{
                that.autoplayLeft();
            }
            });
            this.$el.on("click","ol>li",function(){//绑定下标的点击事件.
                //this==>指向li
                that.$index=$(this).index();
                console.log(that.options.direction)
                if(that.options.direction=="top"||that.options.direction=="bottom"){
                    that.play();
                }else if(that.options.direction=="left"||that.options.direction=="right"){
                    that.playLeft();
                    console.log(111222)
                }
                
            });
        }
        //向上下滑动
        MyBanner.prototype.play=function(){
            var that=this;//给当前对象一个别名
            // console.log("play中的 that==》",that)
            //点亮下标 找到所有ol>li的 先移出active 当前对应li要加上active
            var olLi=this.$el.find("ol>li").removeClass("active");
            if(this.$index==this.imgLength){
                olLi.eq(0).addClass("active");
            }else{
                olLi.eq(this.$index).addClass("active");
            }
            
            var ul=this.$el.find("ul");//找到ul元素
            var topNum=this.$index*this.imgHeight;//计算移动距离
            ul.stop(true).animate({top:-topNum},this.options.duration,function(){
                if(that.$index>=that.imgLength){//判断如果是最后一个张图播放完成. 回到第一张
                    that.$index=0;
                    ul.css({top:0});
                }
            });
        }
        //左右滑动
        MyBanner.prototype.playLeft=function(){
            var that=this;//给当前对象一个别名
            // console.log("play中的 own==》",own)
            //点亮下标 找到所有ol>li的 先移出active 当前对应li要加上active
            var olLi=this.$el.find("ol>li").removeClass("active");
            if(this.$index==this.imgLength){
                olLi.eq(0).addClass("active");
            }else{
                olLi.eq(that.$index).addClass("active");
            }
            that.$el.find("ul").css("display","flex")
            var ul=this.$el.find("ul");
            var leftNum=that.$index*that.imgWidth;
            ul.stop(true).animate({left:-leftNum},this.options.duration.direction,function(){
                if(that.$index>=that.imgLength){
                    that.$index=0;
                    ul.css({left:0});
                }
            });
        }


        MyBanner.prototype.autoplay=function(){//上下自动播放方法
            var that=this;
            console.log(that)
            clearInterval(this.timmerID);
            this.timmerID=setInterval(function(){
                // this==>window
                that.$index++;  
                that.play();
            },that.options.nextTime);
        }

        MyBanner.prototype.autoplayLeft=function(){//左右自动播放方法
            var that=this;
            console.log(that)
            clearInterval(this.timmerID);
            this.timmerID=setInterval(function(){
                // this==>window
                that.$index++;   
                that.playLeft();
            },that.options.nextTime);
        }

        MyBanner.prototype.start=function(){//启动轮播的方法
            this.init();//初始化
            if(this.options.auto&&(this.options.direction=="top"||this.options.direction=="bottom")){//如果配置里面有自动播放
                this.autoplay();//调用定时器自动播放.
                console.log(1111)
            }else{
                this.autoplayLeft();
            } 
            console.log(this.options.direction)
        }
        
        $.fn.banner=function(options){
            //this ->指向 $(".banner")
            var myba=new MyBanner(this,options);
                myba.start();//启动函数
        }
        $(function(){
            $(".banner").banner({
                duration:1000,
                auto:true,
                direction:"left"
            });
            $(".topb").banner({
                duration:300,
                auto:true,
                direction:"top"
            });
           
        })
        /*
            轮播图插件:
                希望动画执行时间可以被配置  animate执行时间可以配置 duration
                希望动画间隔时间可以配置    nextTime
                是否自动播放.     auto 

            插件调用:
                $(".banner").banner({
                    duration:200,
                    nextTime:2000,
                    auto:true
                });
        */
    </script> -->
</body>
</html>